<template>
  <div id="app">
    <Navbar/>
    <!-- 使用<video>标签嵌入视频 -->
    <div class="video-container">
      <video autoplay muted loop controls width="100%">
        <source src="../assets/company.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

    <div class="home-page">
      <div class="row">
        <div class="carousel-container" v-for="group1 in carouselGroups1" :key="group1.id">
          <Carousel :carouselKey="group1.id" :images="group1.images" />
        </div>
      </div>
      <!-- 增加空隙 -->
      <div style="margin-top: 20px;"></div>
      <div class="row">
        <div class="carousel-container" v-for="group2 in carouselGroups2" :key="group2.id">
          <Carousel :carouselKey="group2.id" :images="group2.images" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { ref, provide, onMounted } from 'vue';
  import Navbar from '@/components/AppNavbar.vue';
  import Carousel from "@/components/AppCarousel.vue";
  import axios from 'axios';

  export default {
    name: 'AppHome',
    components: {
      Navbar,
      Carousel
    },
    setup() {
      const currentLocale = ref('en');
      const carouselGroups1 = ref([]);
      const carouselGroups2 = ref([]);

      const changeLocale = (locale) => {
        currentLocale.value = locale;
      };

      provide('currentLocale', currentLocale);
      provide('changeLocale', changeLocale);

      const fetchCarouselData = async () => {
        try {
          const response = await axios.get(process.env.VUE_APP_DOMAIN_URL + '/img/imgManager/queryByPosition', {
            params: { position: "首页-轮播图" }
          });

          if (response.data && Array.isArray(response.data.result)) {
            const data = response.data.result;
            const halfIndex = Math.floor(data.length / 2);
            carouselGroups1.value = data.slice(0, halfIndex).map(group => ({ id: '' + group.id, images: group.images }));
            carouselGroups2.value = data.slice(halfIndex).map(group => ({ id: '' + group.id, images: group.images }));
          } else {
            console.error('Response data or result is not an array.');
          }
        } catch (error) {
          console.error('Error fetching carousel data:', error);
        }
      };

      onMounted(fetchCarouselData);

      return {
        carouselGroups1,
        carouselGroups2,
        currentLocale
      };
    }
  };
</script>

<style>
  #app {
    background-color: #bdcbda; /* 清新的浅蓝色，舒适而不刺眼 */
    color: #333;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    /*padding: 20px;*/
  }

  .home-page {
    /* 为了确保轮播图在垂直方向上对齐 */
    display: flex;
    flex-direction: column;
    /* 垂直方向上的间隙 */
    margin-top: 20px;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 在每行的 Carousel 组件之间添加间隙 */
  }

  .carousel-container {
    width: calc(33% - 10px); /* 每个 Carousel 容器的宽度为页面的一半，并减去间隙 */
    margin-bottom: 20px; /* 控制每个 Carousel 容器之间的垂直间隙 */
  }

  /* 调整每个轮播图的大小来适应一行三个的布局 */
  .AppCarousel {
    width: 30%;
    margin: 10px 20px;
  }
</style>
